<template>
  <div>
    <div ref="chartContainer" style="width: 100%; height: 100%;"></div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, reactive, toRaw } from 'vue';
import { weatherAPI } from '@/apis/sewageplant'
import * as echarts from 'echarts';

const chartContainer = ref<HTMLElement | null>(null);
const data: any = reactive({
  js: [],
  cs: [],
  date: [],
})
let xData: any = [];
let base = +new Date(2020, 12, 30);
let oneDay = 24 * 3600 * 1000;
for (let i = 1; i < 1000; i++) {
  var now = new Date((base += oneDay));
  xData.push([now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'));
}
// data.cs = [
//   509, 917, 2455, 2610, 2719, 3033, 3044, 3085, 2708, 2809, 2117, 2000, 1455, 1210, 719,
//   733, 944, 2285, 2208, 3372, 3936, 3693, 2962, 2810, 3519, 2455, 2610, 2719, 2484, 2078
// ]
// data.js = [
//   2136, 3693, 2962, 3810, 3519, 3484, 3915, 3823, 3455, 4310, 4019, 3433, 3544, 3885, 4208, 3372,
//   3484, 3915, 3748, 3675, 4009, 4433, 3544, 3285, 4208, 3372, 3484, 3915, 3823, 4265, 4298
// ]
// data.date = xData
const getWeatherAPI = async () => {
  try {
    let res = await weatherAPI();
    let jjss: any = []
    let ccss: any = []
    let ddtt: any = []
    res.data.result.data.JS.JS_LL.forEach((i: any) => {
      jjss.push(Number((i.VALUE*5).toFixed(2)))
      ddtt.push(i.DT.substring(0, 10).replace('-', '/').replace('-', '/'))
    })
    res.data.result.data.CS.CS_LL.forEach((i: any) => {
      ccss.push(Number((i.VALUE*5).toFixed(2)))
    })
    data.js = jjss
    data.cs = ccss
    data.date = ddtt

      initChart();
    
  } catch (error) {
    console.error('获取数据失败', error);
  }

}

const initChart = () => {
  if (chartContainer.value) {
    const myChart = echarts.init(chartContainer.value);
    myChart.setOption({
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "shadow",
          textStyle: {
            color: "#fff"
          }

        },
      },
      grid: {
        borderWidth: 0,
        top: '20%',
        bottom: '30%',
        left: '15%',
        textStyle: {
          color: "#fff"
        }
      },

      legend: {
        x: '50%',
        textStyle: {
          color: '#90979c',
        },
        data: ['进水量', '出水量']
      },


      calculable: true,
      xAxis: [{
        type: "category",
        axisLine: {
          lineStyle: {
            color: "rgba(204,187,225,0.5)",
          }
        },
        splitLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        data: toRaw(data.date),
      }],

      yAxis: [{
        type: "value",
        splitLine: {
          show: false
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: "rgba(204,187,225,0.5)",
          }
        },

      }],

      dataZoom: [
        {
          type: 'inside',
          start: 0,
          end: 10
        },
        {
          start: 0,
          borderColor: 'rgba(204, 204, 204,0.2)',
          end: 10
        }
      ],
      series: [{
        name: "进水量",
        type: "line",
        symbolSize: 10,
        symbol: 'circle',
        itemStyle: {
          color: "#6f7de3",
        },
        markPoint: {
          label: {
            normal: {
              textStyle: {
                color: '#fff'
              }
            }
          },
          data: [{
            type: 'max',
            name: '最大值',

          }, {
            type: 'min',
            name: '最小值'
          }]
        },
        data: toRaw(data.js),
      }, {
        name: "出水量",
        type: "line",
        symbolSize: 10,
        symbol: 'circle',
        itemStyle: {
          color: "#c257F6",
        },
        markPoint: {
          label: {
            normal: {
              textStyle: {
                color: '#fff'
              }
            }
          },
          data: [{
            type: 'max',
            name: '最大值',

          }, {
            type: 'min',
            name: '最小值'
          }]
        },
        data: toRaw(data.cs)
      },]
    });

    // 定义数据轮播的变量
    let a = 1;

    // 定义定时器，每2秒切换数据
   
      myChart.dispatchAction({
        type: 'dataZoom',
        startValue: a,
        endValue: a + 24,
      });

  }
}
getWeatherAPI()

getWeatherAPI()
onMounted(() => {
  // if (chartContainer.value) {
  //   const myChart = echarts.init(chartContainer.value);
  //   myChart.setOption(option);

  //   // 定义数据轮播的变量
  //   let a = 1;

  //   // 定义定时器，每2秒切换数据
  //   setInterval(() => {
  //     if (a == data.date.length - 24) {
  //       a = 0;
  //     }
  //     myChart.dispatchAction({
  //       type: 'dataZoom',
  //       startValue: a,
  //       endValue: a + 24,
  //     });
  //     a++;
  //   }, 2000);
  // }
});
</script>
